<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        机构管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>机构业务 /
        业务详情
      </p>
    <div class="content">
    <div class="select" v-if="$route.query.agType!='0' && $route.query.edit != 1">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="开通业务">
          <el-select
            v-model="tupeName[0]"
            placeholder="请选择开通业务"
            @change="list"
          >
            <el-option
              v-for="item in businessType"
              :key="item.channelNo"
              :label="item.channelName"
              :value="[item.channelName, item.channelNo]"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="xian == 2009 || xian == 2010 || xian == 8001 && $route.query.agType!='1'">
      <div class="jibenInfo">业务信息</div>
      <div class="borders"></div>
      <el-form ref="forms" :model="forms" label-width="140px">
        <el-form-item class="list" label="业务名称：">{{ tupeName[0] }}</el-form-item>
        <el-form-item class="list" label="业务状态：">
          <el-select :disabled="disabled" v-model="formes.status" placeholder="">
            <el-option label="开启" value="0"></el-option>
            <el-option label="关闭" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="list"  label="机构d0交易费率："
        v-if="$route.query.agtType=='0' || $route.query.agType=='0'">
          <el-input type="number" @keyup.native="handleInput" :disabled="disabled" v-model="formes.d0TradeRate"></el-input> %
        </el-form-item>
        <el-form-item class="list" label="机构d0手续费："
        v-if="$route.query.agtType=='0' || $route.query.agType=='0'">
          <el-input type="number" @keyup.native="handleInputs" :disabled="disabled" v-model="formes.d0DrawFee"></el-input> 元 / 笔
        </el-form-item>
        <el-form-item class="list" label="商户d0交易费率：">
          <el-input type="number" @keyup.native="handleInput" :disabled="disabled" v-model="formes.memberTradeRate"></el-input> %
        </el-form-item>
        <el-form-item class="list" label="商户d0手续费：">
          <el-input type="number" @keyup.native="handleInputs" :disabled="disabled" v-model="formes.memberDrawFee"></el-input> 元 / 笔
        </el-form-item>
        <el-form-item class="list" label="单笔最低限额：">
          <el-input type="number" @keyup.native="handleInputs" :disabled="disabled" v-model="formes.singleLowest"></el-input> 元
        </el-form-item>
        <el-form-item class="list" label="单笔最高限额：">
          <el-input type="number" @keyup.native="handleInputs" :disabled="disabled" v-model="formes.singleLimit"></el-input> 元
        </el-form-item>
        <el-form-item class="list" label="日交易限额：">
          <el-input type="number" @keyup.native="handleInputs" :disabled="disabled" v-model="formes.dayLimit"></el-input> 元
        </el-form-item>
        <el-form-item class="list" label="月交易限额：">
          <el-input type="number" @keyup.native="handleInputs" :disabled="disabled" v-model="formes.monthLimit"></el-input> 元
        </el-form-item>
        <el-form-item class="list" label="日交易笔数限制">
          <el-input type="number" @keyup.native="handleInputs" :disabled="disabled" v-model="formes.cntCtl"></el-input> 笔
        </el-form-item>
      </el-form>
      </div>
    <div v-if="xian == 2009 || xian == 2010  || xian == 8001 && $route.query.agType!='1'">
      <div class="jibenInfo">业务配置</div>
      <el-form ref="forms" :model="forms" label-width="150px">
        <el-col><el-form-item label="机构ID：">
          <el-input style="width:640px"
          :disabled="disabled"
            v-model="formes.channelInfoChannelCode"
             @input="change($event)"
          ></el-input>
          <!-- <el-input v-model="formes.channelCode" v-else></el-input> -->
        </el-form-item></el-col>
        <el-col><el-form-item label="md5秘钥：">
          <el-input :disabled="disabled" style="width:640px" v-model="formes.md5Key" @input="change($event)"></el-input>
        </el-form-item></el-col>
        <el-col><el-form-item label="aes秘钥：">
          <el-input :disabled="disabled" style="width:640px" v-model="formes.aesKey" @input="change($event)"></el-input>
        </el-form-item></el-col>
        <el-form-item>
          <el-button type="primary" @click="submit">保存</el-button>
          <el-button @click="back">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <div class="jibenInfo">业务信息</div>
      <el-form ref="forms" :model="forms" label-width="150px">
        <el-col>
        <el-form-item label="业务名称：">{{ tupeName[0] }}</el-form-item></el-col>
        <el-col><el-form-item :span="24" label="业务状态：">
          <el-select :disabled="disabled"  v-model="formes.status" placeholder="">
            <el-option label="开启" value="0"></el-option>
            <el-option label="关闭" value="1"></el-option>
          </el-select>
        </el-form-item></el-col>
        <el-col>
        <el-form-item label="银行支付手续费率">
           <el-input type="number" @input="$forceUpdate()" @keyup.native="handleInput" :disabled="disabled" v-model="formes.payCost"></el-input> %
        </el-form-item></el-col>
        <el-col>
        <el-form-item label="银行代付手续费">
           <el-input type="number" @input="$forceUpdate()" :disabled="disabled" @keyup.native="handleInputs" v-model="formes.singleBehalfPayCost"></el-input> 元/笔
        </el-form-item></el-col>
        <el-col>
        <el-form-item label="银行代付手续费率">
           <el-input type="number" @input="$forceUpdate()" :disabled="disabled" @keyup.native="handleInput" v-model="formes.behalfPayCost"></el-input> %
        </el-form-item></el-col>
         <el-col>
        <el-form-item label="手续费最高扣款比例">
           <el-input type="number" @input="$forceUpdate()" :disabled="disabled" @keyup.native="handleInput" v-model="formes.tallTaxPoint"></el-input> %
        </el-form-item></el-col>
         <el-col>
        <el-form-item label="最高扣款金额">
           <el-input type="number" @input="$forceUpdate()" :disabled="disabled" :max="1000"  v-model="formes.tallBehalfPayCost"></el-input> 元/笔
        </el-form-item></el-col>
        <el-form-item>
          <el-button type="primary" @click="submit">保存</el-button>
          <el-button @click="back">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { rules } from "../../plugins/rules.js"
export default {
  data() {
    return {
      disabled:false,
      businessType: "", //业务类型(下拉框)
      formsDisplay: true,
      show:null,
      tupeName: [],
      form: {
        region: "",
      },
      forms: {
        mechanismNo: "",
      },
      formes: {
        channelInfoChannelCode: "", //机构ID
        officeUid: "", //机构ID
        md5Key: "", //md5秘钥
        aesKey: "", //ase秘钥
        status: "", //业务状态
        channelName: "", //业务名称
        channelCode: "", //
        d0DrawFee: "",
        d0TradeRate: "",
        memberDrawFee: "",
        memberTradeRate: "",
        singleLowest: "",
        singleLimit: "",
        dayLimit: "",
        monthLimit: "",
        cntCtl: "",
        agtType: "1",
        oemUid: "",
        channelInfoId :""
      },
      // 回显数据传递的参数
      echoData: {
        channelCode: "",
        agtType: "",
        officeUid: "",
        id: null,
      },
      xian:null
    };
  },
  methods: {
    // 限制输入三位数
    handleInput(e){
      console.log(e.target.value)
      e.target.value=e.target.value.replace(/^(\-)*(\d+)\.(\d\d\d).*$/,'$1$2.$3'); 
      e.target.value=e.target.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); //只保留第一个, 清除多余的
    
    },
    // 限制输入两位小数
    handleInputs(e){
      console.log(e.target.value)
      // debugger
      // e.target.value=rules(e.target.value,"money")
      e.target.value=e.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); 
      e.target.value=e.target.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
    },
    // 开通业务选择
    list(val) {
      console.log(val);
      this.formes.channelCode = val[1];
      this.formes.channelId = val[1];
      this.formes.channelName = val[0];

      console.log(this.formes.channelCode)
      this.xian = this.formes.channelCode
      // console.log(this.formes.channelCode);
      // console.log(item)
      // if (val != 0) this.formsDisplay = false;
      // else this.formsDisplay = true;
      this.tupeName[0] = val[0];
    },
    submit() {
      //代表的是创建
      if(this.formes.tallBehalfPayCost>1000){
        layer.open({
            content: "最高扣款金额不能超过1000",
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          return false;
      }
        if (this.$route.query.edit != 1) {
          // alert("创建执行")
          // return
          // alert("创建执行")

          this.formes.oemUid = localStorage.getItem("uid");
          this.formes.agtType = this.$route.query.agtType;
          console.log(this.formes);
          // return
          // console.log(this.formes)
          axios
            .post("/api/bus/save", this.formes)
            .then((res) => {
              console.log(res)
              if(res.data.code==500 && res.data.msg=="该业务已经开通过"){
                alert("提示业务已经开通过")
              }else{
                // return
                //保存成功后回到列表页面
                this.$router.push({
                  name:"/homePage/mechanismaa"
                })
              }
              
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          // alert("修改执行");
          // return
          //反之则代表的是修改
          // console.log(this.formes);
          console.log("下面是修改的数据");
          // this.formes.oemUid = localStorage.getItem("uid");
          this.formes.agtType = this.$route.query.agType;
          this.formes.officeUid = this.$route.query.officeUid;
          this.formes.channelName = this.$route.query.channelName;
          // this.formes.channelInfoChannelCode = this.formes.channelCode;
          // alert(JSON.stringify(this.formes))
          console.log(this.formes);
          // return
          axios
            .post("/api/bus/update", this.formes)
            .then((res) => {
              // if(res.data.code==)
              console.log(res);
              this.$router.go(-1);
            })
            .catch((err) => {
              console.log(err);
            });
        }
    },
    change(e){
      this.$forceUpdate()
    },
    back(){
      this.$router.go(-1)
    }
  },
  created() {
    
    if(this.$route.query.type=="23"){
      this.disabled=true
    }else{
      this.disabled=false
    }
    this.formes.officeUid = this.$route.query.officeUid;
    this.formes.oemUid = this.$route.query.oemUid;
    this.formes.agtType = this.$route.query.agType;
    this.formes.channelName = this.$route.query.channelName;
    this.xian = this.$route.query.channCode

    // alert(this.formes.agtType)

    // alert(this.$route.query.info)
    // this.formes.agtType = this.$route.query.info
    //下拉列表的数据
    axios
      .post("/api/channel/queryChannel", {})
      .then((res) => {
        // alert("请求下拉成功")
        console.log("下面是下拉的数据");
        console.log(res);
        this.businessType = res.data.data;
        console.log(this.businessType);
      })
      .catch((err) => {
        console.log(err);
      });
    //获取到的传递过来的参数来判断是不是需要回显数据
    // alert(this.$route.query.edit);
    let num = this.$route.query.edit;
    // let agType = this.$route.query.agType
    this.echoData.agtType = this.$route.query.agType;
    // let channCode = this.$route.query.channCode
    this.echoData.channelCode = this.$route.query.channCode;
    this.echoData.officeUid = this.$route.query.officeUid;
    this.echoData.channelName = this.$route.query.channelName;
    this.echoData.id = this.$route.query.id;
    // 获取回显数据
    if (num == 1) {
      axios
        .post("/api/bus/getUpdateBus", this.echoData)
        .then((res) => {
          console.log("下面是回显的数据");
          console.log(res);
          console.log(this.echoData.channelName)
          // if(res.data.onlineOemChannelInfo){
          this.formes = res.data.data;
          if(res.data.crmOfficeOemCfg){
            this.formes.payCost=res.data.crmOfficeOemCfg.payCost
            this.formes.singleBehalfPayCost=res.data.crmOfficeOemCfg.singleBehalfPayCost
            this.formes.behalfPayCost=res.data.crmOfficeOemCfg.behalfPayCost
            this.formes.tallTaxPoint=res.data.crmOfficeOemCfg.tallTaxPoint
            this.formes.tallBehalfPayCost=res.data.crmOfficeOemCfg.tallBehalfPayCost
          }
          
          // this.formes.channelName = res.data.onlineOemChannelInfo.channelName
          // this.formes.channelName = this.$route.query.channelName;
          // this.tupeName.push(res.data.onlineOemChannelInfo.channelName)
          this.tupeName.push(this.$route.query.channelName);
           console.log(this.tupeName[0])
           if(res.data.onlineOemChannelInfo || res.data.onlineOemChannelInfo.length>0){
              this.formes.aesKey = res.data.onlineOemChannelInfo.aesKey;
              this.formes.md5Key = res.data.onlineOemChannelInfo.md5Key;
              //机构ID
              this.formes.channelInfoChannelCode = res.data.onlineOemChannelInfo.channelCode
              //一个id
              this.formes.channelInfoId = res.data.onlineOemChannelInfo.id
            }
         
          // console.log("下面是那个对象")
          // console.log(this.tupeName)
          // console.log()
          // alert(this.formes.channelName)
          // this.tupeName[1] = res.data.data.channelCode
          // this.tupeName[0] = this.tupeName
          // }

          console.log(this.tupeName[0])
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
};
</script>
<style scoped>
.con {
  position: relative;
}
.contbox6_10 {
  width: 100%;
  /* height: 80px;
  margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.jibenInfo {
  width: calc(100% - 40px);
  margin: 20px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  background: #f9fafc;
  float: left;
}
.select {
  float: left;
  margin-left: 2%;
  margin-top: 20px;
}
.forms {
  float: left;
  width: 100%;
  margin-left: 2%;
  margin-top: 20px;
}
.formsTwo {
  float: left;
  width: 100%;
  margin-left: 2%;
  margin-top: 20px;
}
p {
  font-size: 16px;
}
.list {
  width: 570px !important;
}
.borders {
  border-bottom: 2px solid #ccc;
  margin-bottom: 10px;
}
/deep/ .el-input {
  width: 266px ;
}
/deep/ .el-input__inner {
  width: 100% !important;
}
/deep/ .el-form-item {
  margin-right: 25px !important;
}
/deep/ .el-form-item__content{
  line-height: 40px
}
</style>
